@use './colors.scss';
//media
@mixin d_max {
  @media only screen and (max-width: "1600px") {
    @content;
  }
}

@mixin d {
  @media only screen and (max-width: "1024px") {
    @content;
  }
}

@mixin t {
  @media only screen and (max-width: "768px") {
    @content;
  }
}

@mixin m {
  @media only screen and (max-width: "480px") {
    @content;
  }
}

@mixin m_sm {
  @media only screen and (max-width: "320px") {
    @content;
  }
}

//container of main content
@mixin container-max-1 {
  width: 1400px;
}
@mixin container-max-2 {
  width: 1024px;
}
@mixin container-d {
  width: 760px;
}
@mixin container-t {
  width: 100%;
}
@mixin container-m {
  width: 100%;
}

//transitions
@mixin trans-opacity {
  transition: opacity 0.4s ease-in-out;
}

@mixin custom-scroll {
  &::-webkit-scrollbar {
    width: 5px; 
    height: 7px;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: $color-surface-border;
    // outline: 1px solid #1e202a;
    border-radius: 50px;
  }
  
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
  }

  @-moz-document url-prefix() {
    .scroller {
      scrollbar-width: thin;
      scrollbar-color: $color-surface-border;
    }
  }
}

//global vars
$HEADER_HEIGHT: 60px;
$border-radius: var(--border-radius);